<script lang="ts">
import { getCurrentInstance, inject, ref } from 'vue'
import Menu from '../components/icons/Menu.vue'

interface DataItem {
  title: string,
}

export default {
  components: {
    Menu
  },
  setup() {
    const instance = getCurrentInstance()
    const queryString = ref(instance?.proxy?.$route.query.queryString)

    const data: DataItem[] = [
      {
        title: 'hello world',
      },
      {
        title: 'hello vue',
      },
      {
        title: 'hello lain',
      }
    ]

    return {
      queryString,
      data,
    }
  },
  beforeCreate() {
    document.querySelector('body')?.setAttribute('style', 'background: white')
  }
}
</script>

<template>
  <Menu />

  <div class="main-area">
    <div class="main-title">
      <h1>搜索结果</h1>
    </div>
    <hr />
    <div class="search-results-area">
      <a-list item-layout="horizontal" :data-source="data">
        <template #renderItem="{ item }">
          <a-list-item>
            <a-list-item-meta description="hello">
              <template #title>
                <a href="#">{{ item.title }}</a>
              </template>
            </a-list-item-meta>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.main-area {
  padding-left: 12vw;
  padding-top: 10vh;
  width: 85vw;

  .main-title h1 {
    font-weight: bolder;
  }

  .search-results-area {}
}
</style>